<div class="w-100 h-100 d-flex flex-row" *ngIf="hasData || !logError; else hasError">
  <div class="h-100 d-flex flex-column p-2">
    <button class="btn btn-sm btn-secondary" ngbTooltip="Set log levels" (click)="openCtrl()">
      <i class="bi bi-toggles"></i></button>
    <button class="btn btn-sm btn-secondary mt-2" ngbTooltip="Search" (click)="logReader.toggleSearchBar()">
      <i class="bi bi-search"></i>
    </button>
    <hr>
    <button class="btn btn-sm btn-secondary mb-2" ngbTooltip="Clear" (click)="clearBuffer()">
      <i class="bi bi-trash"></i>
    </button>
    <button class="btn btn-sm btn-secondary mb-2" ngbTooltip="Scroll to bottom"
            [disabled]="logReader.reachedBottom" (click)="logReader.scrollToBottom()">
      <i class="bi bi-chevron-bar-down"></i>
    </button>
  </div>
  <app-log-reader class="flex-fill" [source]="logs" #logReader></app-log-reader>
</div>
<ng-template #hasError>
  <div class="p-3">
    <app-error-card title="Failed to fetch system logs" [error]="logError"
                    *ngIf="!hasData && logError"></app-error-card>
  </div>
</ng-template>
